<template>
	<view>
		<view class="receive-block">
			<label>收到的消息</label>
			<input type="text" v-model="receiveMsg" />
		</view>
		<view class="send-block">
			<label>发送的消息</label>
			<input type="text" v-model="message.context" />
		</view>
		<view class="buttons">
			<button type="primary" @tap="clickRequest">点击发送请求</button>
			<button type="primary" @tap="leave">离开页面</button>
		</view>
		<view class="historyMessageNack" v-for="(msg, index) in historyMessageNack" :key=index>
			{{msg}}
		</view>
	</view>
</template>

<script>
	var _self
	export default {

		onLoad() {
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			_self = this
			this.connectSocketInit();
			
		},
		// 下拉刷新触发
		onPullDownRefresh() {
			this.connectSocketInit()
			// 停止当前页面下拉刷新
			uni.stopPullDownRefresh()
		},
		data() {
			return {
				message: {
					sender: 2,
					sendTime: new Date().getTime(),
					receiver: 1,
					context: '',
					type: 1,
					status: 0
				},
				historyMessageNack: [],
				socketTask: null,
				// 确保websocket是打开状态
				receiveMsg: '' // 接收到的消息
			}
		},
		methods: {
			
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】
					//必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099
					//【特别容易犯的错误】
					//url: "ws://localhost:18090/chatCentre/1",
					url: "ws://127.0.0.1:18031/chat/2",
					success(data) {
						console.log("websocket连接成功");
					},
				});

				//看看有没有未读消息
				this.getUnReadNack();
				
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.start()
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						_self.receiveMsg = res.data
						console.log("收到服务器内容：" + res.data);
						this.message.start = false
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
				 	console.log("已经被关闭了")
				})
			},
			
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						_self.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,
					//同时返回一组数据【否则服务器会进去死循环崩溃】
					// this.socketTask.send({
					// 	data: JSON.stringify(_self.message),
					// 	async success() {
					// 		console.log("消息发送成功");
					// 	},
					// });
					_self.send()
				}
			},
			
			//开启心跳检测
			start() {
				this.heartbeatInterval = setTimeout(() => {
					_self.message.heart = true
					this.socketTask.send({
						data: JSON.stringify(_self.message),
						async success() {
							console.log("心跳消息发送成功");
						},
					});
					_self.message.heart = 0
				}, 100)
			},
			
			// 发送消息
			send() {
				uni.request({
					url: "http://localhost:18030/chat/single/send",
					method: "POST",
					data: {
						..._self.message
					},
					header:{
						"Authorization":  uni.getStorageSync("token_type")+" "+uni.getStorageSync("access_token")
					},
					success: function(res) {
						if (res.data.code === 20000) {
							uni.showToast({
								icon: "none",
								title: "发送成功"
							})
						} else {
							console.log(res.data.data)
							uni.showToast({
								icon: "none",
								title: JSON.stringify(res)
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "网络错误"
						})
					}
					// complete() {
					// 	// 停止当前页面下拉刷新
					// 	uni.hideLoading()
					// 	// 刷新密码
					// 	this.randomString(false,this.length)
					// }
				})
			},
			
			//Nack方式获取未读消息
			getUnReadNack() {
				uni.request({
					url: _self.basicUrl + "/chatCentre/mqPullNack/" + _self.message.senderId,
					method: "GET",
					data: {},
					header:{
						"Authorization":  uni.getStorageSync("token_type")+" "+uni.getStorageSync("access_token")
					},
					success: function(res) {
						if (res.data.code === 20000) {
							_self.historyMessageNack = res.data.data
							uni.showToast({
								icon: "none",
								title: "发送成功"
							})
						} else {
							console.log(res.data.data)
							uni.showToast({
								icon: "none",
								title: JSON.stringify(res)
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "网络错误"
						})
					}
					// complete() {
					// 	// 停止当前页面下拉刷新
					// 	uni.hideLoading()
					// 	// 刷新密码
					// 	this.randomString(false,this.length)
					// }
				})
			},
			
			//重新连接
			reconnect() {
				//如果不是人为关闭的话，进行重连
				if (!this.is_open_socket) {
					this.reconnectTimeOut = setTimeout(() => {
						this.connectSocketInit();
					}, 3000)
				}
			},


			leave() {
				uni.reLaunch({
					url: '../send/send'
				})
			}
			
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		beforeDestroy() {
			this.closeSocket();
		},

	}
</script>

<style>
	@import url("../send/send.css");
</style>
